import { defineStore } from 'pinia'
import { SerachConfig, ContextConfig } from '@/components/interfaceType'

export const pageStore = defineStore({
    id: 'page-config',
    state: () => ({
        serach: {
            uri: "https://www.baidu.com/s?ie=UTF-8&wd=%s",
            icon: "https://www.baidu.com/favicon.ico",
            name: "",
        } as SerachConfig,
        searchTypeList: [],
        homeList: {
            leftAside: [
                { name: "日历", id: 7, style: { gridColumnStart: 'span 4', gridRowStart: 'span 3' }, type: 'CalendarBox' },
                { name: "每日一言", id: 9, style: { gridColumnStart: 'span 4', gridRowStart: 'span 1' }, title: "有道翻译", list: [], type: 'AWord' },
            ],
            main: [
                {
                    name: "有道翻译", id: 1,
                    url: "https://fanyi.youdao.com/index.html#/",
                    title: "有道翻译1",
                    iconUrl: "https://img.omnitab.link/icons/713.png?imageMogr2/thumbnail/240x/format/webp/blur/1x0/quality/100|imageslim",
                    type: 'IconBox'
                },
                {
                    name: "bilibili", id: 2,
                    url: "https://www.bilibili.com/",
                    title: "bilibili",
                    iconUrl: "https://img.omnitab.link/icons/713.png?imageMogr2/thumbnail/240x/format/webp/blur/1x0/quality/100|imageslim",
                    type: 'IconBox'
                }
            ],
            rightAside: [
                { name: "待办列表", id: 8, style: { gridColumnStart: 'span 4', gridRowStart: 'span 3' }, list: [], type: 'WaitToBeDone' }
            ]
        } as ContextConfig,
        layout: {
            leftAsideBox: true,
            rightAsideBox: true,
        },
        style: {
            // margin: '0 10px'
        },
        backgroundStyle:{
            backgroundImage: 'url(https://api-storage.4ce.cn/v1/00d9964b652ae98daf6307ec18714645.webp)'
        }
    }),
    actions: {
        setSerachType: function (data: SerachConfig) {
            this.serach.uri = data.uri
            this.serach.icon = data?.icon || ''
            this.serach.name = data?.name || ''
        },
        setSearchTypeList: function (data: any) {
            this.searchTypeList = data
        },
        updateHomeListByPath: function (path: string, value: any) {
            const pathParts = path.split(/(?=[\[\.])/g).filter(Boolean);
            let current = this.homeList;

            for (let i = 0; i < pathParts.length; i++) {
                const key = pathParts[i].replace(/[\[\]]/g, '');

                // 检查是否到了数组的索引  
                if (/^\d+$/.test(key)) {
                    // 如果当前值不是数组，或者索引越界，则直接返回  
                    if (!Array.isArray(current)) return;
                    const index = Number(key);

                    // 如果数组索引不存在，并且不是最后一个部分（即要设置的值），则无法继续  
                    if (index >= current.length && i < pathParts.length - 1) return;

                    // 如果到了最后一个部分，则设置值  
                    if (i === pathParts.length - 1) {
                        // 如果是 ref，则需要设置其 value  
                        if (isRef(current[index])) {
                            if (value === 'delete') {
                                //删除数组元素
                                current.splice(Number(index), 1)
                            } else {
                                current[index].value = value;
                            }
                        } else {
                            if (value === 'delete') {
                                //删除数组元素
                                current.splice(Number(index), 1)
                            } else {
                                current[index] = value;
                            }
                        }
                        return;
                    }

                    // 继续遍历数组元素的属性  
                    current = current[index];
                } else {
                    // 如果不是数组索引，则处理对象的属性  
                    if (current && typeof current === 'object' && !Array.isArray(current)) {
                        // 如果到了最后一个部分，则设置值  
                        if (i === pathParts.length - 1) {
                            // 如果是 ref，则需要设置其 value  
                            if (isRef(current[key])) {
                                current[key].value = value;
                            } else {
                                current[key] = value;
                            }
                            return;
                        }
                        // 继续遍历对象的属性  
                        current = current[key];
                    } else {
                        // 如果当前值不是对象或已经是 undefined，则无法继续  
                        return;
                    }
                }
            }

            // 辅助函数，用于检查一个值是否是 ref  
            function isRef(value: any) {
                return value && value.__v_isRef === true;
            }
        },
    },
    // 为true，app-user这个store中的state数据将缓存到localStorage
    persist: true,
})
